<template>
  <page-meta
    :page-style="'overflow:' + (popupShow ? 'hidden' : 'visible')"
  ></page-meta>
  <view class="container">
    <HeadNav title="活动详情" back />
    <view class="detailinfo">
      <uni-section
        title="基本信息"
        type="line"
        titleFontSize="16px"
        titleColor="#BC9F5E"
      >
        <view class="detail-item">
          <!-- <uni-icons type="email" size="16" style="position: relative;top: 2rpx;"></uni-icons> -->
          <view class="icon-normal"></view>
          <view class="detail-item-right">
            <text>活动名称</text>
            <text class="detail-item-value">{{
              detailInfo?.activityName
            }}</text>
          </view>
        </view>
        <view class="detail-item">
          <view class="icon-normal"></view>
          <view class="detail-item-right">
            <text>活动类型</text>
            <text class="detail-item-value" v-if="detailInfo.activityType">{{
              activityTypeFormat(detailInfo.activityType)
            }}</text>
          </view>
          <!-- activityTags -->
        </view>
        <view class="detail-item">
          <view class="icon-normal"></view>
          <view class="detail-item-right">
            <text>所在城市</text>
            <text class="detail-item-value"
              >{{ detailInfo?.provinceCodeText
              }}{{ detailInfo?.cityCodeText }}</text
            >
          </view>
        </view>
        <view class="detail-item">
          <view class="icon-fy"></view>
          <view class="detail-item-right">
            <text>活动费用</text>
            <text class="detail-item-value">￥{{ detailInfo.price }}</text>
          </view>
        </view>
        <view class="detail-item">
          <view class="icon-time"></view>
          <view class="detail-item-right">
            <text>活动时间</text>
            <text class="detail-item-value"
              >{{ formatDate(detailInfo.startTime) }}~{{
                formatDate(detailInfo.endTime)
              }}</text
            >
          </view>
        </view>
        <view class="detail-item">
          <view class="icon-time"></view>
          <view class="detail-item-right">
            <text>报名时间</text>
            <text class="detail-item-value"
              >{{ formatDate(detailInfo.entryStartTime) }}~{{
                formatDate(detailInfo.entryEndTime)
              }}</text
            >
          </view>
        </view>
        <!-- <view class="detail-item">
				<uni-icons type="email" size="16" style="position: relative;top: 2rpx;"></uni-icons>
				<view class="detail-item-right">
					<text>举办时间段</text>
					<text class="detail-item-value">14:00~18:00</text>
				</view>
			</view> -->
        <view class="detail-item">
          <view class="icon-normal"></view>
          <view class="detail-item-right">
            <text>活动地址</text>
            <text class="detail-item-value">{{ detailInfo?.address }}</text>
          </view>
        </view>
      </uni-section>
      <uni-section
        title="活动主办方"
        type="line"
        titleFontSize="16px"
        titleColor="#BC9F5E"
      >
        <navigator
          :url="'/pages/match/store?pageType=activity&id=' + detailInfo.storeId"
        >
          <view class="storeinfo">
            <view class="storeinfo-left">
              <image
                v-if="detailInfo.storeUrl"
                class="product-item-img"
                :src="detailInfo.storeUrl"
              >
              </image>
              <view v-else class="no-image"></view>
            </view>
            <view class="storeinfo-name">
              {{ detailInfo?.storeName }}
            </view>
            <view class="storeinfo-right">
              <uni-icons type="paperplane-filled" size="30"></uni-icons>
            </view>
          </view>
        </navigator>
      </uni-section>
    </view>

    <view class="content-footer">
      <view
        class="button-bar-btn"
        :class="{ disabled: signUpBtn.disabled }"
        @tap="showSearchPopup"
      >
        {{ signUpBtn.text }}
      </view>
      <view class="button-bar-btn" @tap="gotoMyActive"> 查看我的全部活动 </view>
    </view>
  </view>
  <!-- 普通弹窗 -->
  <uni-popup
    ref="popupRef"
    background-color="#FEFEFE"
    type="bottom"
    @change="popupChange"
  >
    <view class="popup-content">
      <view class="popupinfo">
        <view class="popupinfo-item">
          <view class="popupinfo-item-key">
            <view class="icon-time"></view>
            <text class="key-text">活动时间</text>
          </view>
          <text class="value-text"
            >{{ formatDate(detailInfo.startTime) }}~{{
              formatDate(detailInfo.endTime)
            }}</text
          >
        </view>
        <view class="popupinfo-item">
          <view class="popupinfo-item-key">
            <view class="icon-fy"></view>
            <text class="key-text">活动费用</text>
          </view>
          <text class="value-text">￥{{ detailInfo.price }}</text>
        </view>
        <view class="popupinfo-item">
          <view class="popupinfo-item-key">
            <view class="icon-normal"></view>
            <text class="key-text">支付方式</text>
          </view>
          <text class="value-text">到店付款</text>
        </view>
        <!-- <view class="popupinfo-item">
					<view class="popupinfo-item-key">
						<uni-icons type="email" size="16"></uni-icons>
						<text class="key-text">商家电话</text>
					</view>
					<text class="value-text">123456789</text>
				</view> -->
      </view>
      <view class="popup-bottom">
        <view class="popup-bottom-item">
          <view class="icon-normal"></view>
          <view class="detail-item-right">
            <text>用户手机号</text>
            <text class="detail-item-value">{{ userStore.user.phone }}</text>
          </view>
        </view>
        <view class="button-area">
          <view class="bottom-btn-cancel" @tap="closePopup"> 取消 </view>
          <view class="bottom-btn-sure" @tap="handleSignup"> 确定 </view>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { activityDetailApi, timeEnrollApi, signUpApi } from '@/api/activity'
import { dictionaryApi } from '@/api/common'
import HeadNav from '@/components/HeadNav'
import { onLoad, onShareAppMessage } from '@dcloudio/uni-app'
import { formatDate } from '@/utils/formatTime'
import { useUserStore } from '@/stores'
const popupRef = ref(null)
const popupShow = ref(false)
const detailInfo = ref({})
const signUpBtn = reactive({
  disabled: true,
  text: ''
})
let activeMultiArray = []
let activityId = ''
const userStore = useUserStore()

onLoad(options => {
  console.log('options', options)
  activityId = options.id
  getData(options.id)
})

const activityTypeFormat = value => {
  const target = activeMultiArray.find(item => item.dictValue === value)
  // console.log('target', target)
  return target ? target.dictLabel : ''
}

const getData = async id => {
  try {
    uni.showLoading({
      title: '正在加载...'
    })
    checkActiveSignup(id)
    const res = await activityDetailApi(id)
    const dictRes = await dictionaryApi('activity_type_dict')
    activeMultiArray = dictRes.data
    detailInfo.value = res.data
    uni.hideLoading()
  } catch (error) {
    uni.hideLoading()
    uni.showToast({
      title: '查询活动数据失败，请稍后再试',
      icon: 'error'
    })
  }
}

const checkActiveSignup = id => {
  timeEnrollApi({
    activityId: id
  }).then(res => {
    if (res.data.isShow) {
      // 正常报名
      signUpBtn.disabled = false
    } else {
      signUpBtn.disabled = true
    }
    signUpBtn.text = res.data.msg
  })
}
const handleSignup = async () => {
  uni.showLoading({
    title: '正在报名...'
  })
  await signUpApi({
    activityId: activityId
  })
  uni.hideLoading()
  uni.showToast({
    title: '报名成功',
    success: () => {
      checkActiveSignup(activityId)
    }
  })
  popupRef.value.close()
}

const showSearchPopup = () => {
  if (signUpBtn.disabled) {
    return
  } else {
    popupRef.value.open()
  }
}

const closePopup = () => {
  popupRef.value.close()
}

const popupChange = e => {
  popupShow.value = e.show
}

const gotoMyActive = () => {
  uni.navigateTo({
    url: '/pages/my/my-active'
  })
}
</script>

<style lang="scss" scoped>
.container {
  background-color: #eeeeee;

  box-sizing: border-box;
  font-family: PingFangSC-Regular, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
  // min-height: 100vh;
}
.detailinfo {
  padding: 32rpx;
}

.detail-item {
  background-color: #e8e8e8;
  padding: 16rpx;
  display: flex;
  align-items: center;
  gap: 24rpx;
  font-size: 28rpx;
  margin-bottom: 20rpx;
  .icon-normal {
    width: 28rpx;
    height: 28rpx;
    background: url('https://ucp-tcg.com:18001/mc/app/static/icon_xx.png')
      no-repeat;
    background-size: contain;
  }

  .icon-fy {
    width: 28rpx;
    height: 28rpx;
    background: url('https://ucp-tcg.com:18001/mc/app/static/icon_fy.png')
      no-repeat;
    background-size: contain;
  }

  .icon-time {
    width: 28rpx;
    height: 28rpx;
    background: url('https://ucp-tcg.com:18001/mc/app/static/icon_sj.png')
      no-repeat;
    background-size: contain;
  }

  .detail-item-right {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
  }

  .detail-item-value {
    color: #ababab;
    max-width: 70%;
  }
}

.storeinfo {
  padding: 10rpx;
  border: 2rpx solid #d2cab8;
  background-color: #fff;
  display: flex;
  gap: 40rpx;

  .storeinfo-left {
    width: 150rpx;
    height: 150rpx;

    image {
      width: 100%;
      height: 100%;
    }

    .no-image {
      width: 100%;
      height: 100%;
      background-color: $no-image-color;
    }
  }

  .storeinfo-name {
    font-size: 32rpx;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
  }

  .storeinfo-right {
    display: flex;
    flex: 1;
    justify-content: flex-end;
    padding-right: 20rpx;
    align-items: center;
  }
}

.content-footer {
  margin-top: 40rpx;
  border-top: 2rpx solid #dedede;
  padding-top: 65rpx;
  display: flex;
  align-items: center;
  flex-direction: column;

  .button-bar-btn {
    font-family: PingFangSC-Regular, sans-serif;
    background-color: #333;
    color: #fff;
    font-size: 32rpx;
    padding: 16rpx 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60%;
    border-radius: 12rpx;
    margin-bottom: 40rpx;
    background-image: url('https://ucp-tcg.com:18001/mc/app/static/btn-bg2.png');
    background-repeat: no-repeat;
    background-size: contain;

    &.disabled {
      color: rgba(0, 0, 0, 0.3);
      background-color: #e1e1e1;
      border: 2rpx solid #cecece;
      background-image: url('https://ucp-tcg.com:18001/mc/app/static/btn-bg1.png');
    }
  }
}

.popup-content {
  // @include flex;
  // align-items: center;
  // justify-content: center;
  padding: 15px 0;
  // height: 40vh;
}

.popupinfo-item {
  display: flex;
  justify-content: space-between;
  font-size: 28rpx;
  margin-bottom: 30rpx;
  padding: 0 32rpx;
  .popupinfo-item-key {
    display: flex;
    align-items: center;
  }
  .icon-normal {
    width: 28rpx;
    height: 28rpx;
    background: url('https://ucp-tcg.com:18001/mc/app/static/icon_xx.png')
      no-repeat;
    background-size: contain;
  }

  .icon-fy {
    width: 28rpx;
    height: 28rpx;
    background: url('https://ucp-tcg.com:18001/mc/app/static/icon_fy.png')
      no-repeat;
    background-size: contain;
  }

  .icon-time {
    width: 28rpx;
    height: 28rpx;
    background: url('https://ucp-tcg.com:18001/mc/app/static/icon_sj.png')
      no-repeat;
    background-size: contain;
  }
  .key-text {
    margin-left: 16rpx;
  }

  .value-text {
    color: #ababab;
  }
}

.popup-bottom {
  padding: 40rpx 16rpx;
  border-top: 2rpx solid #dedede;
}

.popup-bottom-item {
  background-color: #e8e8e8;
  padding: 16rpx;
  display: flex;
  align-items: center;
  gap: 24rpx;
  font-size: 28rpx;

  .detail-item-right {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
  }

  .detail-item-value {
    color: #ababab;
  }
}

.button-area {
  display: flex;
  gap: 100rpx;
  justify-content: center;
  width: 100%;
  padding: 0 32rpx;
  padding-top: 60rpx;
  box-sizing: border-box;

  .bottom-btn-cancel {
    border-radius: 12rpx;
    border: 2rpx solid #cccccc;
    background-color: #e1e1e1;
    // width: 264rpx;
    height: 72rpx;
    // line-height: 72rpx;
    width: 40%;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    background-image: url('https://ucp-tcg.com:18001/mc/app/static/btn-bg1.png');
    background-repeat: no-repeat;
    background-size: contain;
    // font-weight: 600;
  }

  .bottom-btn-sure {
    border-radius: 12rpx;
    border: 2rpx solid #cccccc;
    background-color: #333333;
    color: #fff;
    height: 72rpx;
    width: 40%;
    // padding: 16rpx 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28rpx;
    background-image: url('https://ucp-tcg.com:18001/mc/app/static/btn-bg2.png');
    background-repeat: no-repeat;
    background-size: contain;
  }
}

::v-deep .uni-section {
  background-color: #eeeeee;
}
::v-deep .uni-section .uni-section-header__decoration.line {
  height: 32rpx;
}

::v-deep .uni-section .uni-section-header__content {
  font-weight: bold;
}

::v-deep .uni-section .uni-section-header__decoration {
  background-color: #bb9f5e;
}

::v-deep .uni-section .uni-section-content {
  // padding-left: 36rpx !important;
  // padding-right: 36rpx !important;
  padding-bottom: 24rpx;
}
</style>
